<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌街</title>
    <link href="../css/common.css" rel="stylesheet">
    <link href="../css/base.css" rel="stylesheet">

    <link href="css/brandStreet.css" rel="stylesheet">
    <style>
    	.newHeadNav li:nth-child(3) a{
    		color:#EA5404;
    	}
    </style>
</head>
<body>

<header id="header"></header>
<div id="headerBox"></div>

<!--商城导航-->
<div id="hmNav"></div>

<div class="X-container">
    <!-- 静态图片跟选项-->
    <div class="brand-street-pic">
        <ul class="brand-classify flex">
            <li v-for=" c in classifyArr" @click="getCats(c,$event)"> <p><img src="" alt=""> <span v-cloak>{{c.catName}}</span></p></li>

        </ul>
    </div>
    <!-- -->
    <section class="ZZHT-container">
        <div class="fix-nav-container disFixed-nav">
            <ul class="fix-nav flex" >
                <li v-for=" (o ,i) in classifyArr" @click="getCats(o,$event)">  <p v-cloak>{{o.catName}}</p><i></i></li>

            </ul>
            <span class="slideRight"></span>
            <span class="slideLeft"></span>
        </div>
        <div class="fix-nav-container fixed-nav">
            <ul class="fix-nav flex" >
                <li v-for=" o in classifyArr" @click="getCats(o,$event)">  <p v-cloak>{{o.catName}}</p><i></i></li>

            </ul>
            <span class="slideRight"></span>
            <span class="slideLeft"></span>
        </div>
        <div class="classify-btn" >
                {{innerTxt}}
        </div>
        <ul class="classify-list flex">
            <li v-for=" b in filterImg"  @click="brandDetail(b)"><img :src="imgUrl+b.brandImg" :alt="b.brandName" v-cloak> </li>
            <li class="more-brand flex"  @click="moreImg">
               <p> 更多品牌</p>
                <div class="more-right flex">
                    <svg t="1529635562842" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3111" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25">
                        <defs><style type="text/css"></style></defs>
                        <path d="M689.621 512l-328.832-328.832-60.331 60.331 268.501 268.501-268.501 268.501 60.331 60.331z" p-id="3112" fill="#ea5404"></path>
                    </svg>
                </div>

            </li>


        </ul>

    </section>
</div>


<div id="ck1"></div>
<div id="ck3"></div>

<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue-resource.min.js"></script>
<script type="text/javascript" src="../js/qrcode.js"></script>
<script type="text/javascript" src="../plugin/layer/layer.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/common_view.js"></script>
<script type="text/javascript" src="../js/ljf_base.js"></script>
<script>
    new Vue({
        el:".X-container",
        data:{
           classifyArr:[],
            brandImg:[],
            cur:-1,
            innerTxt:'',
            isShow:false,
            limitNumber:22,
            catId:'',
            n:22
        },
        mounted:function(){
           this.$nextTick(function () {
               this.getClassify();


               //this.getProductOrder()
           })
        },

        filters:{
            formatMoney:function (val) {
                return '￥'+val.toString()
            },


        },
        computed:{
            filterImg:function(){
                return this.brandImg.slice(0,this.limitNumber);
            }
        },
        methods:{
            getClassify:function () {
                var _this=this;
                _this.$http.get(SURL+'goodsCats/selectFirstCat').then(function (res) {
                    _this.classifyArr=res.body.entity
                   _this.firstImg()
                })
            },

            //获取子集分类
            getCats:function (item,even) {
                this.limitNumber=this.n;
                this.catId=item.catId;
                // this.isShow=true;
               this.innerTxt=even.target.innerText;
               this.brandImg=[];
                this.$http.get(SURL+'goods/getCatBrands',{params:{catId:item.catId}}).then(function (res) {
                   this.brandImg=res.body.entity;
                })
            },
            firstImg:function(){
                var id=this.classifyArr[0].catId;
                // console.log(id)
                this.$http.get(SURL+'goods/getCatBrands',{params:{catId:id}}).then(function (res) {
                    this.innerTxt=this.classifyArr[0].catName;
                    this.brandImg=res.body.entity;
                })
            },
            //点击加载更多品牌
            moreImg:function () {

                this.limitNumber+=this.n;
                // console.log(this.limitNumber)
                if(this.filterImg.length>=this.brandImg.length){
                    layer.msg('没有更多了')

                }
            },
            //获取品牌详情
            brandDetail:function (item) {
                //'../second/second.html?catId=302&brandId=11'
                location.href="../second/second.html?catId="+this.catId+'&brandId='+item.brandId
            }

        },


    });
    $(function () {
        $(document).scroll(function() {
            if(($(window).scrollTop()) >= $(".disFixed-nav").offset().top){
              //  console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
                $('.fixed-nav').show()
            }else{
                $('.fixed-nav').hide()
            }
        })

    });





  $('.slideLeft').on('click',function () {
      $('.slideRight').show()
     move(1,this)
    });
    $('.slideRight').on('click',function () {
        $('.slideLeft').show()
      move(-1,this)
    });
    var n=0;
    function  move(f,self) {
        var  _this=self,nav=$('.fix-nav');
        var $liList=$(_this).siblings('.fix-nav').find('li');
        var simpleWidth=$($liList[0]).width();
        var  parentWidth=($liList.length)*simpleWidth;
        n+=simpleWidth*f;
        if(n>=0){
            // $left.hide()
            nav.css({'margin-left':0})
            $('.slideLeft').hide()
        }else if(-n>=(parentWidth-1200)+72 ){
            nav.css({'margin-left':n+'px'})
            $('.slideRight').hide()
            return false
        }else{
            nav.animate({'margin-left':n+'px'},500)
        }
    }




</script>
</body>
</html>